/**
 * 用户导航栏组件
 * @author 杨世峰
 */

<template>
  <div class="navBar">
    <div class="navBar_border">
      <div class="navBar_inner">
        <span class="navBar_placeholder_regular"></span>

        <router-link to="/userhome/dict"><a class="navBar_link navBar_link_ink">首页</a></router-link>
        <span class="navBar_separator"></span>

        <router-link to="/userhome/booklets"><a class="navBar_link navBar_link_ink">单词本</a></router-link>
        <span class="navBar_separator"></span>
        <router-link to="/userhome/shares"><a class="navBar_link navBar_link_ink">共享单词本</a></router-link>
        <span class="navBar_separator"></span>

        <a class="navBar_link navBar_link_ink" @click="handleLogout">退出登录</a>
        <span class="navBar_separator"></span>

        <div class="menu_container">
          <div class="wr_avatar navBar_avatar">
            <router-link to="/userhome/person"
              ><img
                :src="iconUrl"
                class="wr_avatar_img"
            /></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserHeader",
  data() {
    return {
      
    };
  },
  computed: {
    userId() {
      return this.$store.getters.userId
    },
    iconUrl() {
      return "https://picsum.photos/id/" + this.userId + "/46"
    }
  },

  methods: {
    handleLogout() {
      this.$router.push({ name: "LoginPage" });
      this.$store.dispatch("Logout")
    }
  }
};
</script>

<style scoped>
div {
  display: block;
}

.navBar {
  background-color: #f6f7f9;
  position: static;
  backdrop-filter: blur(20px);
  z-index: 80;
  width: 100%;
  height: 72px;
  transition: background-color 0.2s ease-in-out;
}

.navBar_border {
  border-radius: 0;
  border: 0 solid #d4d6d8;
  height: 100%;
}

.navBar_inner {
  max-width: 1332px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 0vh;
}

.navBar_placeholder_regular {
  flex: 1;
}

.navBar_link {
  color: #0d141e;
  margin-left: 12px;
  font-size: 16px;
  font-weight: 500;
  opacity: 0.7;
}

.navBar_separator {
  background-color: #0d141e;
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 18px;
  opacity: 0.3;
}

.menu_container {
  position: relative;
}
.navBar_avatar {
  width: 28px;
  height: 28px;
  margin-left: 18px;
}

.wr_avatar {
  display: inline-block;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.wr_avatar_img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  vertical-align: top;
}

img {
  border: 0;
}

a {
  user-select: none;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

a:hover {
  color: #00f;
}
</style>